<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta charset="utf-8">
	    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	    <meta name="apple-mobile-web-app-status-bar-style" content="black">
	    <meta name="apple-mobile-web-app-capable" content="yes">
	    <meta name="format-detection" content="telephone=no">
	    <meta name="format-detection" content="address=no">
	    <link rel="stylesheet" type="text/css" href="css/j-index.css"/>
	    <link rel="stylesheet" type="text/css" href="css/j-reset.css"/>
	    <link rel="stylesheet" type="text/css" href="css/j-common.css"/>
	    <link rel="stylesheet" type="text/css" href="css/swiper.min.css">
	    <script src="js/jquerys-1.7.2.min.js" type="text/javascript"></script>
		<script src="js/swiper.jquery.min.js" type="text/javascript"></script>
		<script src="js/j-rem.js" type="text/javascript"></script>
		<script src="js/j-index.js" type="text/javascript"></script>
		<title>产品首页</title>
	</head>
	<body>
		<div class="wrap color clearfix">
		  	 <div class="car-title">
		  		  <a class="back"></a>
		  	 	  <i class="pro-nav-list"></i>
		  	 	  <p class="car-title-name">兰蔻奇迹绽放香水</p>
		  	 </div>
			
			<div class="product-wrap">

				<div class="right-icon-list">
				    <ul class="right-icon-wrap">
					     <i class="right-collect"></i>
						 <i class="right-city"></i>
						 <i class="right-color c1"></i>
						 <i class="right-color c2"></i>
						 <i class="right-arrow"></i>
				    </ul>
				</div>	
				 <div class="car-pro-big">
					<img src="img/pro-big-icon.png">	
				 </div>
				
				<div class="icon-list">
					<a href="custom.html" class=""><img src="img/brd-service.png"></a>
					<a href="add-hope.html" class=""><img src="img/add-hope.png"></a>
					<a href="#" class=""><img src="img/share.png"></a>
					<a href="shopping-car.html" class=""><img src="img/gwc-normal.png"></a>
				</div>	

				<div class="product-situ">
				   <div class="product-situ-top  clearfix">
					  <span class="fl pro-price">￥450</span>
					  <span class="fr sold-num">已售290件</span>
					</div>
			      <p class="product-desc">
					新绽放外观，金属瓶盖搭配极简线条——简单，纯净；比起纯粹的少女心，更懂浪漫，更添神秘，更懂表达。
				  </p>
				</div>
			</div>
			
				
				<!--优惠卷  -->
			<div class="coupon clearfix">
				  <img class="coupon-icon fl" src="img/coupon.png">
				  <span class="coupon-word fl">优惠卷 &nbsp;<span class="coupon-num">10</span>元&nbsp;可用</span>
				  <img class="fr" src="img/doll.png">

			</div>
			<!-- 促销 -->
			<div class="cuxiao clearfix">
					<span class="cuxiao-l fl">促销</span>

					<div class="cuxiao-r fr">
					    <span class="limit-buy fl">限购</span>
					    <p class="cuxiao-r-top fl"> 
					      仅够买一件时享受优惠，超出数量以结算价格为准
					    </p>
					</div>
					<div class="cuxiao-r fr">
					    <span class="limit-buy fl">加价购</span>
					    <p class="cuxiao-r-top fl"> 
					      仅够买一件时享受优惠，超出数量以结算价格为准
					    </p>
					</div>
			</div>
			
			<div class="pro-word clearfix">
					<div class="pro-word-l fl">
							<img src="img/ser-icon1.png">
					</div>
					<div class="pro-word-r fr">
					    <a class="to-pro-index" href=""><img src="img/arrow-r1.png"></a>
						<a class="pro-word-title" href="brand.html">Lancome 兰蔻</a>
						<p class="pro-word-content">兰蔻1935年诞生于法国，是由Armand Petitjean（阿曼达·珀蒂让）创办的品牌。作为全球知名的高端化妆品品牌，兰蔻涉足护肤、彩妆、香水等多个产品领域..</p
					</div>
			</div>
		</div>

		<div class="pro-banner-wrap">
  	  	 		<ul id="judge">
  	  	 		 	<li >商品详情</li>
  	  	 		 	<li class="pic-btn">用户评价</li>
  	  	 		 	<li>注意事项</li>
  	  	 	    </ul>
  	  	 		<div class="pro-banner">
  	  	 	 	  <div class="swiper-wrapper">
						<div class="swiper-slide">
							<a href=""><img src="img/tab.png"/></a>
						</div>
		  	  	   	  	<div class="swiper-slide swiper-slide-active">
		  	  	   	  		 <div class="judge clearfix">
								<div class="judge-top">
									 <div class="judge-l fl">
										<img class="judge-icon" src="img/judge-pro1.png">	
										<div class="top-right">
										 <span class="judge-num">202</span>					
										</div>			
									 </div>
									 <div class="judge-m fl">
										<p class="judge-sold">已售<span class="judge-sold-num">239</span>件</p>
										<p class="judge-sold">收到<span class="judge-sold-num">29</span>条评价</p>		
									 </div>
									 <div class="judge-r fr">
										 <span class="judge-score">5.0</span>
										 <span class="average-score">平均评分</span>
									 </div>
								</div>	
							
								<div class="judge-bottom">
									<div class="judge-info clearfix">
										 <img class="customer-icon fl" src="img/customer-icon1.png">
										 <div class="customer-info fr">
											<div class="customer-info-top">
												<span class="customer-name">青阳</span>
											    <img src="img/customer-level.png" class="customer-level">
												<!-- <img src="img/customer-city.png" class="customer-city"> -->
												 <span class="judge-time fr">2017-02-16</span>
											</div>
											<div class="customer-info-content">
												 <p class="customer-info-word">
													 收到好久了 都没空来确认 现在确认 谢谢阿米果的礼物哦 包装很严实 护发素超大一瓶的 安安补水霜很好用哦 黄胖子洗着也挺好的 特别是金灿灿的眼霜这一瓶 涂在眼睛周围..	
												 </p>
												 <div class="customer-info-icon">
												 		<img src="img/cust-pro1.png">
												 		<img src="img/cust-pro2.png">
												 		<img src="img/cust-pro3.png">
												 </div>						
											</div>
										 </div>
									</div>

									<div class="judge-info clearfix">
										 <img class="customer-icon fl" src="img/customer-icon2.png">
										 <div class="customer-info fr">
											<div class="customer-info-top">
												<span class="customer-name">Dove</span>
											    <img src="img/customer-level.png" class="customer-level">
												<!-- <img src="img/customer-city.png" class="customer-city"> -->
												 <span class="judge-time fr">2017-02-16</span>
											</div>
											<div class="customer-info-content">
												 <p class="customer-info-word">
													 买了四个东西，一起评了:这个黄芪霜用了几天了感觉有点效果但是不明显，可能还要用一阵子？黄胖子就试用了一下，一股肥皂味，讲真不能接受，不过用了感觉还挺舒服，不紧绷;蜗牛免洗面膜这个大赞！
												 </p>
												 					
											</div>
										 </div>
									</div>
									
									<div class="judge-info clearfix">
										 <img class="customer-icon fl" src="img/customer-icon3.png">
										 <div class="customer-info fr">
											<div class="customer-info-top">
												<span class="customer-name">Jasmine</span>
											    <img src="img/customer-level.png" class="customer-level">
												<!-- <img src="img/customer-city.png" class="customer-city"> -->
												 <span class="judge-time fr">2016-03-16</span>
											</div>
											<div class="customer-info-content">
												 <p class="customer-info-word">
													 Le cose in Tempo ricevuto,per il suo regalo Di Natale! Ha ricevuto in Tempo ricevuto in Susan la Bellzza	 e'Molto paziente, ma anche la Festa del Campione per me! Grazie!
												 </p>
												 					
											</div>
										 </div>
									</div>


								</div>
								

		  	  	   	  		 </div>
		  	  	   	  	</div>


		  	  	   	  	<div class="swiper-slide">
		  	  	   	  		<a href=""><img src="img/tab.png"/></a>
		  	  	   	  	</div>
		  	  	    </div>
  	  	 	    </div>
	  	  	 	    
	  	</div>

		<div class="foot-wrap">
			<div class="foot-icon-list">
				<div class="foot-icon-item">
					<a href="#" class=""><img src="img/brd-service.png"></a>
					<span class="foot-info">联系客服</span>
				</div>
				<div class="foot-icon-item">
					<a href="add-hope.html" class=""><img src="img/add-hope.png"></a>
					<span class="foot-info">加入心愿</span>
				</div>
				<div class="foot-icon-item">
					<a href="#" class=""><img src="img/share.png"></a>
					<span class="foot-info">分享</span>
				</div>
				<div class="foot-icon-item">
					<a href="shopping-car.html" class=""><img src="img/gwc-normal.png"></a>
					<span class="foot-info">加入购物车</span>
				</div>
			</div>	
		</div>	
		
		


		</div>



		<div id="my-pro-topup"> 
				<p class="cover-title">兰蔻奇迹绽放香水
					<a class="cover-service" href=""><img src="img/brd-service-w.png"></a>
				</p>
				
				<div class="cover-wrap">
					<div class="cover-brand">
					<img  class="cover-brand-city fl" src="img/city.png">
					<span class="cover-brand-name fl">悉尼直购</span>
				</div>

				<div class="cover-brand">
					<img  class="cover-brand-icon fl" src="img/cover1.png">
					<span class="cover-brand-name fl">兰蔻</span>
					<a class="cover-brand-fr fr" href="#">品牌主页<i class="cover-to-index"></i></a> 		
				</div>	
				<div class="cover-brand1">
					<span class="cover-brand-mode fl">款式</span>
					<span class="cover-brand-value bg1 fl"></span>
					<span class="cover-brand-value bg2 fl"></span>
					<span class="cover-brand-fr fr">玫瑰香型</span> 		
				</div>	
				
				<div class="cover-brand1">
					<span class="cover-brand-mode fl">容量</span>
					<span class="cover-brand-index">30ML</span>
					<span class="cover-brand-index">50ML</span>
					<span class="cover-brand-index">100ML</span>
					
				</div>
				<div class="cover-brand1">
					<span  class="cover-brand-mode fl">保质期</span>
					<span class="cover-brand-index fl">36个月</span>		
				</div>
				
				<div class="cover-brand1">
					<span  class="cover-brand-mode fl">香水分类</span>
					<span class="cover-brand-index fl">香水EDP</span>		
				</div>
				<div class="cover-brand1">
					<span  class="cover-brand-mode fl">香调</span>
					<span class="cover-brand-index fl">花香调</span>		
				</div>

				<div class="cover-brand1">
					<span  class="cover-brand-mode fl">适合肤质</span>
					<span class="cover-brand-index fl">任何肤质</span>	
					<a class="cover-brand-know fr" href="#">继续了解<i class="cover-to-know"></i></a>	
				</div>
				</div>
				<div class="icon-list-up">
					<!-- <a href="#" class=""><img src="img/brd-service.png"></a> -->
					<a href="#" class=""><img src="img/add-hope-w.png"></a>
					<a href="#" class=""><img src="img/share-w.png"></a>
					<a href="add-shopcar.html" class=""><img src="img/gwc-normal-w.png"></a>
				</div>
				<i class="cancle-btn"></i>
		</div>
		<div id="mask"></div>


	 <script type="text/javascript">
	 		$(document).ready(function(){
	 			var proStraff = new Swiper('.pro-banner',{
	 				initialSlide :1,
	 		// paginationClickable: true,
	 			speed:500,
	 			onSlideChangeStart:function(proStraff){
	 				$('#judge .pic-btn').removeClass('pic-btn');
	 				$('#judge li').eq(proStraff.activeIndex).addClass('pic-btn');
	 			}
				})
				 $("#judge li").on('touchstart mousedown' , function(e){
				 	e.preventDefault()
				 	$("#judge .pic-btn").removeClass('pic-btn');
				 	$(this).addClass('pic-btn');
				 	proStraff.slideTo($(this).index())
				 })
			 	$("#judge li").click(function(e){
			 		e.preventDefault()
			 	});
			 
			 
		 }) 		
	 </script>
    </body>	
</html>
